<template>
  <el-dialog
    title="服务记录"
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    width="80%"
    top="5vh"
  >
    <el-table 
      :data="records" 
      v-loading="loading"
      :empty-text="emptyText"
    >
      <!-- 记录ID列 -->
      <el-table-column prop="doctorServiceId" label="记录ID" width="120"/>

      <!-- 服务时间列 -->
      <el-table-column label="服务时间" width="260">
        <template #default="{row}">
          <div class="time-cell">
            <div>开始：{{ formatDateTime(row.startTime) }}</div>
            <div>结束：{{ formatDateTime(row.endTime) }}</div>
          </div>
        </template>
      </el-table-column>

      <!-- 服务状态列 -->
      <el-table-column label="状态" width="120" align="center">
        <template #default="{row}">
          <el-tag :type="statusType[row.status]">
            {{ statusMap[row.status] }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { getDoctorServiceListAPI } from '@/network/serviceOrder';
import { ElMessage } from 'element-plus';
import { formatDate } from '@/utils/date'; // 需要改造这个工具函数

// 状态映射
const statusMap = { 
  1: '未开始', 
  2: '进行中', 
  3: '已结束' 
};

const statusType = { 
  1: 'info', 
  2: 'warning', 
  3: 'success' 
};

// 新增时间格式化方法
const formatDateTime = (timestamp) => {
  return formatDate(timestamp, 'YYYY-MM-DD HH:mm:ss');
};
import dayjs from 'dayjs';


const props = defineProps({
  visible: Boolean,
  serviceId: Number
});

const emit = defineEmits(['update:visible']);
const records = ref([]);
const loading = ref(false);
watch(
  () => props.serviceId,
  async (newVal) => {
    if (newVal && props.visible) {
      loading.value = true;
      try {
        const res = await getDoctorServiceListAPI(newVal);
        

        // 2. 处理空数据情况
        if (!res|| res.length === 0) {
          records.value = [];
          ElMessage.info('当前服务暂无记录');
          return;
        }

        // 3. 数据格式转换
        records.value = res.map(item => ({
          // 映射字段 (根据实际接口字段调整)
          doctorServiceId: item.doctorServiceId || 'N/A', 
          // 转换时间戳为数字类型
          startTime: Number(item.startTime), 
          endTime: Number(item.endTime),
          status: item.status
        }));

        console.log('处理后的数据:', records.value); // 验证数据结构

      } catch (error) {
        console.error('请求失败:', error);
        records.value = [];
        ElMessage.error(error.message || '加载失败');
      } finally {
        loading.value = false;
      }
    }
  },
  { immediate: true }
);
</script>
<style scoped>
.time-cell {
  line-height: 1.5;
  color: #666;
  
  div:first-child {
    margin-bottom: 4px;
  }
}

.el-tag {
  margin: 2px;
}
</style>